<template>
	<view class="order-detail-container page-container">
		<!-- 订单状态 -->
		<view class="status-section">
			<view class="status-icon" :class="'status-' + orderInfo.order_status">
				<text class="status-emoji">{{ getStatusEmoji(orderInfo.order_status) }}</text>
			</view>
			<view class="status-info">
				<text class="status-title">{{ getStatusTitle(orderInfo.order_status) }}</text>
				<text class="status-desc">{{ getStatusDesc(orderInfo.order_status) }}</text>
			</view>
		</view>

		<!-- 物流信息(可能有多个包裹) -->
		<block v-if="orderInfo.logistics && orderInfo.logistics.length>0">
			<view class="logistics-section" v-for="wlitem in orderInfo.logistics" :key="wlitem.id"
				@click="toLogistics(wlitem)">
				<view class="section-title">
					<text class="title-text">物流信息（包裹{{wlitem.package_seq}}）</text>
				</view>
				<view class="logistics-header">
					<view class="logistics-left">
						<u-icon name="car" size="24" color="#1c705e"></u-icon>
						<view class="logistics-info">
							<text class="logistics-company">{{ wlitem.lc_name }}</text>
							<text class="logistics-no">运单号：{{ wlitem.track_no }}（包裹{{wlitem.package_seq}}）</text>
						</view>
					</view>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
				<view class="logistics-progress">
					<text class="progress-text">{{ wlitem.logistics_status_desc }}</text>
					<text class="progress-time">{{ wlitem.last_logistics_time }}</text>
				</view>
			</view>
		</block>

		<!-- 物流信息 -->
		<!-- <view class="logistics-section"
			v-if="[4,5,7].includes(orderInfo.order_status) && orderInfo.logistics && orderInfo.logistics.length>0">
			<view class="section-title">
				<text class="title-text">物流信息</text>
			</view>
			<view class="logistics-info" v-for="wlitem in orderInfo.logistics" :key="wlitem.id">
				<view class="logistics-item">
					<text class="logistics-label">物流公司</text>
					<text class="logistics-value">{{ wlitem.lc_name }}</text>
				</view>
				<view class="logistics-item">
					<text class="logistics-label">运单号</text>
					<text class="logistics-value">{{ wlitem.track_no }}（包裹{{wlitem.package_seq}}）</text>
				</view>
			</view>
		</view> -->

		<!-- 订单信息 -->
		<view class="order-info-section">
			<view class="section-title">
				<text class="title-text">订单信息</text>
			</view>
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">订单号</text>
					<text class="info-value">{{ orderInfo.order_no }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">下单时间</text>
					<text class="info-value">{{ orderInfo.create_time }}</text>
				</view>
				<view class="info-item" v-if="orderInfo.pay_time">
					<text class="info-label">支付时间</text>
					<text class="info-value">{{ orderInfo.pay_time }}</text>
				</view>
				<view class="info-item" v-if="orderInfo.ship_time">
					<text class="info-label">发货时间</text>
					<text class="info-value">{{ orderInfo.ship_time }}</text>
				</view>
				<view class="info-item" v-if="orderInfo.receive_time">
					<text class="info-label">收货时间</text>
					<text class="info-value">{{ orderInfo.receive_time }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">支付方式</text>
					<text class="info-value">{{ orderInfo.pay_type_desc }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">配送方式</text>
					<view class="order-type-badge type-normal">
						<text class="type-text">{{ getTypeText(orderInfo.receive_type) }}</text>
					</view>
				</view>
				<view class="info-item" v-if="orderInfo.buyer_words">
					<text class="info-label">订单备注</text>
					<text class="info-value">{{ orderInfo.buyer_words }}</text>
				</view>
			</view>
		</view>

		<!-- 客户信息 -->
		<view class="customer-section">
			<view class="section-title">
				<text class="title-text">客户信息</text>
			</view>
			<view class="customer-card">
				<view class="customer-header">
					<text class="customer-name">{{ orderInfo.nickname }}</text>
					<text class="customer-phone">{{ orderInfo.mobile_hidden }}</text>
				</view>
			</view>
		</view>

		<!-- 收货信息 -->
		<view v-if="orderInfo.receive_type===1" class="customer-section">
			<view class="section-title">
				<text class="title-text">收货信息</text>
			</view>
			<view class="customer-card">
				<view class="customer-header">
					<text class="customer-name">{{ orderInfo.receiver_name }}</text>
					<text class="customer-phone">{{ orderInfo.receiver_phone_hidden }}</text>
				</view>
				<view class="address-info">
					<text class="address-label">收货地址：</text>
					<text
						class="address-text">{{ orderInfo.pcas+' '+$secret.decryptAES(orderInfo.receiver_address) }}</text>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="products-section">
			<view class="section-title">
				<text class="title-text">商品信息</text>
			</view>
			<view class="product-list">
				<view class="product-item" v-for="product in orderInfo.products" :key="product.id">
					<image :src="$tools.buildUrl(product.main_image)" mode="aspectFill" class="product-image"></image>
					<view class="product-details">
						<text class="product-name">{{ product.spu_name }}</text>
						<text class="product-spec">{{ product.sku_name }}</text>
						<view class="product-price-qty">
							<!-- 普通订单显示价格 -->
							<text class="product-price">¥{{ product.actual_price }}</text>
							<!-- 积分订单显示积分价格 -->
							<!-- <text class="product-price points-price"
								v-if="orderInfo.type === 'points' && orderInfo.paymentMethod === 'points'">{{ product.pointsPrice }}积分</text> -->
							<!-- 积分卡订单显示积分卡价格 -->
							<!-- <text class="product-price card-price"
								v-if="orderInfo.type === 'points' && orderInfo.paymentMethod === 'pointsCard'">{{ product.cardPrice }}</text> -->
							<!-- 购买数量 -->
							<text class="product-qty">×{{ product.quantity }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 费用明细 -->
		<view class="cost-section">
			<view class="section-title">
				<text class="title-text">费用明细</text>
			</view>
			<view class="cost-list">
				<!-- 普通订单显示金额 -->
				<template>
					<view class="cost-item">
						<text class="cost-label">商品总价</text>
						<text class="cost-value">¥{{ orderInfo.goods_amount }}</text>
					</view>
					<view class="cost-item" v-if="orderInfo.post_amount > 0">
						<text class="cost-label">运费</text>
						<text class="cost-value">¥{{ orderInfo.post_amount }}</text>
					</view>
					<view class="cost-item" v-if="orderInfo.shop_cost_amount > 0">
						<text class="cost-label">优惠金额</text>
						<text class="cost-value discount">-¥{{ orderInfo.shop_cost_amount }}</text>
					</view>
					<view class="cost-item total">
						<text class="cost-label">订单金额</text>
						<text class="cost-value total-amount">¥{{ orderInfo.pay_amount }}</text>
					</view>
				</template>

				<!-- 积分兑换订单显示积分或积分卡 -->
				<template v-if="orderInfo.type === 'points'">
					<!-- 积分支付 -->
					<view class="cost-item" v-if="orderInfo.paymentMethod === 'points'">
						<text class="cost-label">消耗积分</text>
						<text class="cost-value points-value">{{ orderInfo.pointsUsed }}积分</text>
					</view>
					<!-- 积分卡支付 -->
					<view class="cost-item" v-if="orderInfo.paymentMethod === 'pointsCard'">
						<text class="cost-label">积分卡</text>
						<text class="cost-value card-value">{{ orderInfo.pointsCardUsed }}</text>
					</view>
					<view class="cost-item" v-if="orderInfo.shippingFee > 0">
						<text class="cost-label">运费</text>
						<text class="cost-value">¥{{ orderInfo.shippingFee }}</text>
					</view>
					<view class="cost-item total" v-if="orderInfo.totalAmount > 0">
						<text class="cost-label">总计</text>
						<text class="cost-value total-amount">¥{{ orderInfo.totalAmount }}</text>
					</view>
				</template>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-section">
			<button class="action-btn primary" v-if="canDelivery" @click="handleDelivery">
				确认发货
			</button>
			<button class="action-btn primary" v-if="canPickup" @click="handlePickup">
				确认核销
			</button>
			<button class="action-btn primary" v-else-if="canScanPickup" @click="scanPickupCode">
				扫码核销
			</button>
		</view>

		<!-- 发货弹窗 -->
		<u-popup :show="showDeliveryPopup" @close="closeDeliveryPopup" mode="bottom" :round="20">
			<view class="filter-popup">
				<view class="popup-header">
					<text class="popup-title">订单发货：{{orderInfo.order_no}}</text>
					<text class="popup-close" @click="closeDeliveryPopup">✕</text>
				</view>

				<view class="filter-content">
					<view class="filter-section">
						<text class="filter-title">收货人</text>
						<view class="filter-options option-text">
							{{orderInfo.receiver_name}} {{orderInfo.receiver_phone_hidden}}
						</view>
						<view class="filter-options option-text">
							{{orderInfo.pcas}} {{$secret.decryptAES(orderInfo.receiver_address)}}
						</view>
					</view>
					<!-- 选择物流 -->
					<view class="filter-section">
						<text class="filter-title">选择物流</text>
						<view class="filter-options">
							<view class="filter-option" v-for="(option, index) in logisticsOptions" :key="index"
								:class="{ active: selectedLogistics === index }" @click="selectedLogistics=index">
								<text class="option-text">{{ option.lc_name }}</text>
							</view>
						</view>
					</view>
					<view class="filter-section">
						<text class="filter-title">快递单号
							<text class="change-btn" @click="scanTrackingNo">点击扫码</text>
						</text>
						<view class="filter-options">
							<view class="form-item">
								<input class="form-input" placeholder="请扫描快递单号" v-model="track_no" />
							</view>
						</view>
					</view>
				</view>

				<view class="filter-actions">
					<button class="reset-btn" @click="closeDeliveryPopup">取消</button>
					<button class="confirm-btn" @click="confirmShipping">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				orderId: '',
				orderInfo: {},
				logisticsOptions: [],
				selectedLogistics: -1,
				showDeliveryPopup: false,
				track_no: '',
				pickupCode: '', // 订单核销码
			}
		},
		computed: {
			...mapGetters(['userInfo', 'dealerInfo']),
			// 是否可以确认发货
			canDelivery() {
				return this.orderInfo.receive_type === 1 && [2, 3, 4].includes(this.orderInfo.order_status)
			},
			// 是否可以确认核销
			canPickup() {
				return this.pickupCode.trim() && this.orderInfo.receive_type === 2 &&
					this.orderInfo.self_pickup_status !== 2 && [2, 3, 4, 5].includes(this.orderInfo.order_status)
			},
			canScanPickup() {
				return this.orderInfo.receive_type === 2 &&
					this.orderInfo.self_pickup_status !== 2 && [2, 3, 4, 5].includes(this.orderInfo.order_status)
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id
			}
			if (options.pickupCode) {
				this.pickupCode = options.pickupCode
			}
			this.loadOrderDetail()
			this.loadLogisticsCompany()
		},

		methods: {
			// 加载订单详情
			loadOrderDetail() {
				if (!this.orderId.trim() && !this.pickupCode.trim()) {
					return
				}
				this.$api.agent.GetAgentOrderInfo({
					id: this.orderId,
					pickupCode: this.pickupCode,
				}).then(res => {
					const province = this.$tools.parseJsonObject(res.data.receiver_province)
					const city = this.$tools.parseJsonObject(res.data.receiver_city)
					const town = this.$tools.parseJsonObject(res.data.receiver_town)
					this.orderId = res.data.id;
					this.orderInfo = res.data;
					const shipPackage = this.orderInfo.logistics.find(item => item.ship_time && item.ship_time !==
						'');
					const recvPackage = this.orderInfo.logistics.find(item => item.receive_time && item
						.receive_time !== '');
					if (shipPackage) {
						this.orderInfo.ship_time = shipPackage.ship_time
					}
					if (recvPackage) {
						this.orderInfo.receive_time = recvPackage.receive_time
					}
				})
			},

			// 获取状态图标
			getStatusEmoji(status) {
				const emojiMap = {
					'0': '💰',
					'1': '💰',
					'2': '📦',
					'3': '📦',
					'4': '🚚',
					'5': '🚚',
					'7': '✅',
					'6': '❌'
				}
				return emojiMap[status] || '❓'
			},

			// 获取状态标题
			getStatusTitle(status) {
				const titleMap = {
					'0': '等待付款',
					'2': '等待发货',
					'3': '正在备货',
					'4': '正在配送',
					'5': '正在配送',
					'7': '订单完成',
					'6': '订单取消'
				}
				return titleMap[status] || '未知状态'
			},

			// 获取状态描述
			getStatusDesc(status) {
				const descMap = {
					'0': '等待客户付款',
					'2': '客户已付款，等待发货',
					'3': '商家正在准备发货',
					'4': '商品正在配送中，请耐心等待',
					'5': '商品正在配送中，请耐心等待',
					'7': '订单已完成，感谢您的购买',
					'6': '订单已取消'
				}
				return descMap[status] || ''
			},

			// 获取订单类型文本
			getTypeText(type) {
				const typeMap = {
					'1': '快递配送',
					'2': '用户自提'
				}
				return typeMap[type] || type
			},

			// 获取操作按钮文本
			getActionText(status) {
				const textMap = {
					'pending_shipment': '立即发货',
					'shipped': '查看物流'
				}
				return textMap[status] || '处理'
			},

			// 订单发货处理
			handleDelivery() {
				if (this.canDelivery) {
					this.showDeliveryPopup = true
				}
			},

			// 确认发货
			confirmShipping() {
				if (this.selectedLogistics < 0) {
					uni.showToast({
						title: '请填写物流公司',
						icon: 'none'
					})
					return
				}
				if (!this.track_no.trim()) {
					uni.showToast({
						title: '请填写快递单号',
						icon: 'none'
					})
					return
				}
				let lc_code = '';
				let lc_name = '';
				if (this.logisticsOptions.length > 0) {
					lc_code = this.logisticsOptions[this.selectedLogistics].lc_code
					lc_name = this.logisticsOptions[this.selectedLogistics].lc_name
				}
				// 更新订单状态
				let totalweight = this.orderInfo.products.reduce((accumulator, currentValue) => {
					return accumulator + currentValue.weight;
				}, 0);
				let totalvolume = this.orderInfo.products.reduce((accumulator, currentValue) => {
					return accumulator + currentValue.volume;
				}, 0);
				const products = this.orderInfo.products.filter(item => item.logistics_status === 0)
				if (!(products && products.length > 0)) {
					uni.showToast({
						title: '订单商品已发货，当下没有可发货的商品',
						icon: 'none'
					})
					return
				}
				const product_info = products.map(o => o.id)
				this.$api.agent.DeliveryOrders({
					id: this.orderInfo.id,
					track_no: this.track_no,
					lc_code: lc_code,
					lc_name: lc_name,
					weight: totalweight,
					volume: totalvolume,
					products: this.orderInfo.products,
					product_info: product_info,
				}).then(res => {
					this.showDeliveryPopup = false
					uni.showToast({
						title: '发货确认成功',
						icon: 'success'
					})
					this.orderInfo = res.data

					const pages = getCurrentPages()
					const prevPage = pages[pages.length - 2]
					if (prevPage) {
						prevPage.$vm.setOrderStatus(this.orderInfo)
					}
				})
			},

			// 确认核销
			handlePickup() {
				if (!this.canPickup) {
					return
				}
				const realname = this.userInfo.realname.trim() ? this.userInfo.realname : this.userInfo.nickname
				const self_pickup_by = this.dealerInfo.shop_name + '（' + realname + '）'

				uni.showModal({
					title: '确认核销',
					content: '确认核销订单 ' + this.orderInfo.order_no + ' 吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.agent.PickupOrders({
								id: this.orderInfo.id,
								self_pickup_storeid: this.dealerInfo.company_id, // 核销商家必传
								self_pickup_by: self_pickup_by, // 核销人必传
								pickupCode: this.pickupCode, // 核销码必传
							}).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'success'
								})
								this.orderInfo = res.data

								const pages = getCurrentPages()
								const prevPage = pages[pages.length - 2]
								if (prevPage) {
									// prevPage.$vm.setOrderStatus(this.orderInfo)
									prevPage.$vm.onSearch()
								}
							})
						}
					}
				})
			},

			// 扫描核销码
			scanPickupCode() {
				uni.authorize({
					scope: 'scope.camera', // 申请相机权限
					success: () => {
						// 授权成功后调用扫码
						uni.scanCode({
							onlyFromCamera: false,
							scanType: ['qrCode', 'barCode'],
							success: (res) => {
								// console.log('扫码结果:', res);
								if (res.result && res.result != '') {
									const pickupCode = res.result
									const orderid = pickupCode.substr(0, pickupCode.length - 6)
									if (orderid === this.orderInfo.id) {
										this.handlePickup()
									} else {
										uni.showToast({
											title: '核销码错误',
											icon: 'none',
											duration: 2000
										})
									}
								}
							},
							fail: (err) => {
								// console.error('扫码失败:', err);
								uni.showToast({
									title: '扫码失败，请重试',
									icon: 'none'
								})
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: "请授权相机权限"
						});
					}
				});
			},

			// 加载物流公司
			loadLogisticsCompany() {
				this.$api.order.GetLogisticsCompany().then(res => {
					this.logisticsOptions = res.data
				})
			},

			// 选择物流公司
			selectLogistics(index) {
				this.selectedLogistics = index
			},

			// 扫码快递单号
			scanTrackingNo() {
				uni.authorize({
					scope: 'scope.camera', // 申请相机权限
					success: () => {
						// 授权成功后调用扫码
						uni.scanCode({
							onlyFromCamera: false,
							scanType: ['qrCode', 'barCode'],
							success: (res) => {
								// console.log('扫码结果:', res);
								if (res.result && res.result != '') {
									this.track_no = res.result;
								}
							},
							fail: (err) => {
								// console.error('扫码失败:', err);
								uni.showToast({
									title: '扫码失败，请重试',
									icon: 'none'
								})
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: "请授权相机权限"
						});
					}
				});
			},

			// 关闭发货弹窗
			closeDeliveryPopup() {
				this.showDeliveryPopup = false
			},

			// 跳转到物流详情
			toLogistics(wlitem) {
				uni.navigateTo({
					url: `/pages/order/logistics?orderId=${this.orderId}&logistics_id=${wlitem.id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	/* 订单状态 */
	.status-section {
		background-color: white;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.status-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.status-pending_payment {
		background-color: #fff3cd;
	}

	.status-pending_shipment {
		background-color: #d1ecf1;
	}

	.status-shipped {
		background-color: #cce5ff;
	}

	.status-completed {
		background-color: #d4edda;
	}

	.status-cancelled {
		background-color: #f8d7da;
	}

	.status-emoji {
		font-size: 48rpx;
	}

	.status-info {
		flex: 1;
	}

	.status-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}

	.status-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
		display: block;
	}

	/* 通用区块样式 */
	.order-info-section,
	.customer-section,
	.products-section,
	.cost-section,
	.logistics-section {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		margin-bottom: 25rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	/* 订单信息 */
	.info-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.order-type-badge {
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.order-type-badge.type-normal {
		background-color: #e3f2fd;
		color: #1976d2;
	}

	.order-type-badge.type-points {
		background-color: #fff3e0;
		color: #f57c00;
	}

	/* 客户信息 */
	.customer-card {
		background-color: #f8f9fa;
		border-radius: 16rpx;
		padding: 25rpx;
	}

	.customer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.customer-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.customer-phone {
		font-size: 26rpx;
		color: #666;
	}

	.address-info {
		display: flex;
		gap: 10rpx;
	}

	.address-label {
		font-size: 26rpx;
		color: #666;
		flex-shrink: 0;
	}

	.address-text {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
		flex: 1;
	}

	/* 商品信息 */
	.product-list {
		display: flex;
		flex-direction: column;
		gap: 25rpx;
	}

	.product-item {
		display: flex;
		gap: 20rpx;
	}

	.product-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.product-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
		line-height: 1.4;
	}

	.product-spec {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.product-price-qty {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		font-size: 28rpx;
		font-weight: 600;
		color: #52a58a;
	}

	.points-price {
		color: #f57c00 !important;
	}

	.card-price {
		color: #9c27b0 !important;
	}

	.product-qty {
		font-size: 26rpx;
		color: #666;
	}

	/* 费用明细 */
	.cost-list {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.cost-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cost-item.total {
		border-top: 1rpx solid #f0f0f0;
		padding-top: 15rpx;
		margin-top: 10rpx;
	}

	.cost-label {
		font-size: 28rpx;
		color: #666;
	}

	.cost-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.cost-value.discount {
		color: #52a58a;
	}

	.total-amount {
		font-size: 32rpx;
		font-weight: 700;
		color: #52a58a;
	}

	.points-value {
		font-size: 28rpx;
		font-weight: 600;
		color: #f57c00;
	}

	.card-value {
		font-size: 28rpx;
		font-weight: 600;
		color: #9c27b0;
	}

	/* 物流信息 */
	.logistics-section {
		background-color: #ffffff;
		padding: 40rpx;
		margin-bottom: 20rpx;
	}

	.logistics-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.logistics-left {
		display: flex;
		align-items: center;
	}

	.logistics-info {
		margin-left: 16rpx;
	}

	.logistics-company {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.logistics-no {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	.logistics-progress {
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
	}

	.progress-text {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.progress-time {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	// .logistics-info {
	// 	display: flex;
	// 	flex-direction: column;
	// 	gap: 20rpx;
	// }

	// .logistics-item {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// }

	// .logistics-label {
	// 	font-size: 28rpx;
	// 	color: #666;
	// }

	// .logistics-value {
	// 	font-size: 28rpx;
	// 	color: #333;
	// 	font-weight: 500;
	// }

	/* 操作按钮 */
	.action-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		gap: 20rpx;
	}

	.action-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		border: none;
	}

	.action-btn.secondary {
		background-color: #f8f9fa;
		color: #666;
	}

	.action-btn.primary {
		background-color: #52a58a;
		color: white;
	}

	/* 筛选弹窗 */
	.filter-popup {
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 80vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.popup-close {
		font-size: 36rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.filter-content {
		flex: 1;
		padding: 30rpx;
		overflow-y: auto;
	}

	.filter-section {
		margin-bottom: 40rpx;
	}

	.filter-section:last-child {
		margin-bottom: 0;
	}

	.filter-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.filter-options {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.filter-option {
		padding: 16rpx 24rpx;
		background-color: #f8f9fa;
		border-radius: 40rpx;
		border: 2rpx solid transparent;
	}

	.filter-option.active {
		background-color: #e8f5f0;
		border-color: #52a58a;
	}

	.option-text {
		font-size: 26rpx;
		color: #666;
	}

	.filter-option.active .option-text {
		color: #52a58a;
		font-weight: 600;
	}

	.filter-actions {
		display: flex;
		gap: 20rpx;
		padding: 30rpx;
		background-color: #f8f9fa;
		border-top: 1rpx solid #f0f0f0;
	}

	.reset-btn,
	.confirm-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		border: none;
	}

	.reset-btn {
		background-color: white;
		color: #666;
		border: 2rpx solid #e0e0e0;
	}

	.confirm-btn {
		background-color: #52a58a;
		color: white;
	}

	.form-item {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.form-input {
		flex: 1;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: 1rpx solid #e9ecef;
	}

	.change-btn {
		font-size: 32rpx;
		color: #52a58a;
		font-weight: normal;
		float: right;
	}
</style>